<!--
 * @Descripttion: 用户信息编辑与新增dialog
 * @version: 
 * @Author: 淏
 * @Date: 2024-04-30 13:09:04
 * @LastEditors: 淏
 * @LastEditTime: 2024-05-05 18:53:14
-->
<template>
  <!-- 新增与编辑dialog -->
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="dialogClose"
    destroy-on-close
    width="25%"
  >
    <div slot="title" class="dialog-footer">
      <span class="text">{{ dialogTitle }}</span>
    </div>
    <el-form style="margin-top: 16px">
      <el-form-item label-width="150px">
        <span slot="label">
          <span class="text">姓名</span>
        </span>
        <el-input
          style="width: 150px"
          size="mini"
          placeholder="请输入用户姓名"
          v-model="formData.nick"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="150px" v-if="dialogType == 'add'">
        <span slot="label">
          <span class="text">账号</span>
        </span>
        <el-input
          style="width: 150px"
          size="mini"
          placeholder="请输入用户系统账号"
          auto-complete="new-password"
          v-model="formData.username"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="150px">
        <span slot="label">
          <span class="text">密码</span>
        </span>
        <el-input
          style="width: 150px"
          size="mini"
          show-password
          placeholder="请输入用户账号密码"
          auto-complete="new-password"
          v-model="formData.passwd"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="150px" v-if="dialogType == 'add'">
        <span slot="label">
          <span class="text">确认密码</span>
        </span>
        <el-input
          style="width: 150px"
          size="mini"
          show-password
          placeholder="请再次输入确认密码"
          auto-complete="new-password"
          v-model="formData.sedPasswd"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="150px">
        <span slot="label">
          <span class="text">部门</span>
        </span>
        <el-select
          size="mini"
          v-model="formData.departmentId"
          placeholder="选择部门"
          class="handle-select mr10"
          :popper-append-to-body="false"
          clearable
        >
          <el-option
            v-for="(item, index) in departments"
            :key="index"
            :label="item.name"
            :value="item.id"
            @click.native="flterChange(item)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="150px">
        <span slot="label">
          <span class="text">是否启用</span>
        </span>
        <el-switch
          size="mini"
          active-value="true"
          inactive-value="false"
          v-model="formData.isEnable"
        ></el-switch>
      </el-form-item>

      <el-form-item label-width="150px">
        <span slot="label">
          <span class="text">账户等级</span>
        </span>

        <el-select
          size="mini"
          v-model="formData.level"
          placeholder="选择账户状态查询"
          class="handle-select mr10"
          style="width: 150px"
          :popper-append-to-body="false"
          clearable
        >
          <el-option label="管理员" value="admin"></el-option>
          <el-option label="员工" value="staff"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        size="mini"
        class="button"
        plain
        @click="dialogVisible = false"
      >
        取 消
      </el-button>
      <el-button
        size="mini"
        class="button"
        type="primary"
        plain
        @click="handleDialog"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryAll_department, update_user, add_user } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'userData',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {
        dialogTitle: '',
        dialogType: '',
        chooseData: '',
        dialogVisible: false,
        departments: [],
        formData: {
          id: '',
          isEnable: 'true',
          username: '',
          passwd: '',
          sedPasswd: '',
          nick: '',
          level: 'staff', //staff   admin
          departmentId: '',
          departmentName: '',
        },
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      showDialog(type, chooseData) {
        console.log(chooseData)
        this.dialogVisible = true
        if (type == 'update') {
          this.formData = chooseData
          this.dialogTitle = '编辑用户信息'
          this.dialogType = 'update'
        } else {
          this.dialogTitle = '新增用户信息'
          this.dialogType = 'add'
        }
      },
      dialogClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
            this.clearDialog()
          })
          .catch((_) => {})
      },
      clearDialog() {
        this.dialogVisible = false
        this.formData = {
          id: '',
          isEnable: 'true',
          username: '',
          passwd: '',
          sedPasswd: '',
          nick: '',
          level: 'staff', //staff   leader
          departmentId: '',
          departmentName: '',
        }
      },
      handleDialog() {
        if (this.dialogType == 'add') {
          this.addData()
        } else {
          this.updateData()
        }
      },
      flterChange(e) {
        this.formData.departmentId = e.id
        this.formData.departmentName = e.name
      },
      addData() {
        let isEnable = this.formData.isEnable
        let username = this.formData.username
        let passwd = this.formData.passwd
        let sedPasswd = this.formData.sedPasswd
        let nick = this.formData.nick
        let level = this.formData.level
        let departmentId = this.formData.departmentId
        let departmentName = this.formData.departmentName
        var qs = require('qs')
        var data = qs.stringify({
          isEnable: isEnable,
          username: username,
          passwd: passwd,
          sedPasswd: sedPasswd,
          nick: nick,
          level: level,
          departmentId: departmentId,
          departmentName: departmentName,
        })
        add_user(data).then((res) => {
          console.log(res)
          this.$message({
            type: 'success',
            message: res.message,
          })
          this.$emit('getTableData')
          this.clearDialog()
        })
      },
      updateData() {
        let isEnable = this.formData.isEnable
        let passwd = this.formData.passwd
        let userId = this.formData.id
        let nick = this.formData.nick
        let level = this.formData.level
        let departmentId = this.formData.departmentId
        let departmentName = this.formData.departmentName
        var qs = require('qs')
        var data = qs.stringify({
          isEnable: isEnable,
          passwd: passwd,
          userId: userId,
          nick: nick,
          level: level,
          departmentId: departmentId,
          departmentName: departmentName,
        })
        update_user(data).then((res) => {
          console.log(res)
          this.$message({
            type: 'success',
            message: res.message,
          })
          this.$emit('getTableData')
          this.clearDialog()
        })
      },
      queryDepartment() {
        queryAll_department().then((res) => {
          this.departments = res.data
        })
      },
    },
    created() {},
    mounted() {
      this.queryDepartment()
    },
  }
</script>

<style scoped>
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .handle-select {
    width: 200px;
  }
</style>
<style lang="less" scoped>
  /deep/.el-dialog {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.8);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
